{% extends "base.html" %}
{% block title %}node页面{% endblock %}
{% block k8s %}layui-nav-itemed{% endblock %}
{% block k8s_node %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "k8s:node" %}'>Kubernetes</a>
      <a><cite>Node</cite></a>
   </span>

    <div class="demoTable" style="margin-top: 10px; margin-left: 10px;">
        {#        <button class="layui-btn" >创建</button>#}
        搜索名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table_node" lay-filter="node"></table>

{% endblock %}
{% block js %}

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">YAML</a>
        <a class="layui-btn layui-btn-xs layui-btn-checked" lay-event="details">详情页</a>
    </script>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_node'
                , url: '{% url "node_api" %}'
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'name', title: 'NAME', sort: true}
                    , {field: 'labels', title: '标签', templet: labelsFormat}
                    , {field: 'status', title: '状态', sort: true}
                    , {field: 'ready', title: '是否可调度', sort: true}
                    , {field: 'kubelet_version', title: 'node版本'}
                    , {field: 'CRI', title: '容器运行时'}
                    , {field: 'cpu', title: 'CPU'}
                    , {field: 'memory', title: 'Memory'}
                    , {field: 'create_time', title: '创建时间', sort: true}
                    , {fixed: 'right', title: '操作',width:135, minWidth: 120, toolbar: '#barDemo'}
                ]]
                , id: 'testReload'
                , page: true
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_key: demoReload.val()
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //触发单元格工具事件 删除和查看
            table.on('tool(node)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'edit') {
                    layer.open({
                          title: 'YAML查看',
                          type: 2,
                          area: ['80%', '80%'],
                          content: '{% url "ace_edit" %}?resource=node' + '&namespace=' + data["namespace"] + '&name=' + data["name"]
                    });
                } else if (obj.event === 'details'){
                    window.location.href = "{% url 'k8s:node_details' %}?node_name=" + data['name']
                }

            });

        });

    </script>
{% endblock %}